* {
	padding: 0;
	margin: 0;
}
ul li {
	list-style: none;
}
.left {
	float: left;
}
.right {
	float: right;
}
header {
	width: 100%;
	height: 68px;
	line-height: 38px;
	padding: 15px 40px;
	box-sizing: border-box;
	background: #4c59ac;
	overflow: hidden;
}
.avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-size: cover;
	border: 1px solid #ccc;
	background: #fff;
}
.user-name {
	margin:0 10px;
	overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sys-title {
	width: 252px;
	height: 42px;
	background: url('../img/1.png');
}
.sys-content {
	overflow: hidden;
}
.slidebar {
	width: 20%;
	height: 400px;
	background: #F8F8FC;
}
.slidebar > div {
	background: #4C59AC;
	width: 100%;
	height: 55px;
	line-height: 55px;
	border-top: 1px solid #ccc;
	text-align: center;
	border-top: 1px solid #34408E;
}
.slidebar ul li{
	width: 100%;
	height: 55px;
	line-height: 55px;
	border-top: 1px solid #ccc;
	text-align: center;
	cursor: pointer;
}
.slidebar ul .active{
	color: #4C59AC;
}
.slidebar ul li:last-child{
	border-bottom: 1px solid #ccc;
}
.summary {
	width: 80%;
	height: 100%;
	box-sizing: border-box;
}
.summary iframe {
	width: 100%;
	height: 100%;
}